import { ref } from "vue";
import ApiService from '@/api/axios';
import * as Api from "@/api/filmRead/filmRead";
const useImgInfo = () => {
  let info = ref<{
    Magnification: string;
    Mpp: string;
    Width: string;
    Height: string;
  }>({
    Magnification: "",
    Mpp: "",
    Width: "",
    Height: "",
  });
  const getInfo = async (url: string) => {
    const newUrl = url.split("/deepzoom");
    const config = {baseURL: "/"};
    if (import.meta.env.MODE === "development") {
      config.baseURL = "/api";
    } else {
      config.baseURL = "/";
    }
    const res = await ApiService.get("/deepzoom" + newUrl[1] + ".slideinfo", config);
    if (res.status === 200) {
      const parser = new DOMParser();
      const xmlDoc = parser.parseFromString(res.data, "text/xml");
      if (xmlDoc.querySelector("Image")) {
        const Width = xmlDoc.querySelector("Image")!.getAttribute("Width")!;
        const Height = xmlDoc.querySelector("Image")!.getAttribute("Height")!;
        const Mpp = xmlDoc.querySelector("Image")!.getAttribute("Mpp")!;
        const FileSize = xmlDoc.querySelector("Image")!.getAttribute("FileSize");
        const LevelCount = xmlDoc.querySelector("Image")!.getAttribute("LevelCount");
        const Magnification = xmlDoc.querySelector("Image")!.getAttribute("Magnification")!;
        const Vendor = xmlDoc.querySelector("Image")!.getAttribute("Vendor");
        info.value = {
          Magnification,
          Mpp,
          Width,
          Height,
        }
        console.log('原图信息：',info.value)
      }
    }
  }
  const getImageUrl = async (taskId: number, seriesUid: string) => {
    const params = {
      taskId,
      seriesUid
    }
    const res = await Api.getBigImageUrl(params);
    return res;
  }
  return {
    getInfo,
    getImageUrl,
    info
  }
};

export default useImgInfo;